<template>
  <div class="anwser-window">
    <!-- 文本域 -->
    <div class="scroll show-content">
      <textarea
        v-if="contentType === 'Text'"
        ref="anwserText"
        class="scroll show-content-textarea"
        maxlength="1000"
        autofocus
        :value="content"
        @input="setContent"
        @keydown.13.exact="enterSend"
        @keyup.ctrl.enter.exact="lineFeed"
      ></textarea>
      <img v-else-if="contentType === 'Picture'" class="show-content-img" :src="content" alt="图片丢失" />
      <video v-else-if="contentType === 'Video'" class="show-content-video" :src="content" controls></video>
      <audio
        v-if="contentType === 'Voice' && /.mp3$/.test(content)"
        class="show-content-voice"
        :src="content"
        type="audio/mp3"
        controls
      ></audio>
      <span v-if="contentType === 'Voice' && !/.mp3$/.test(content)" class="show-content-file" v-text="content"></span>
      <span
        v-else-if="contentType === 'File'"
        class="show-content-file"
        v-text="$options.filters.getFileName(content)"
      ></span>
    </div>
    <!-- 发送 -->
    <div class="opration-btn">
      <!-- 提示 -->
      <div v-if="!quoteMsg">按ctrl + enter 换行</div>
      <!-- 引用消息 -->
      <div v-else class="quote-msg">
        <div class="quote-content">
          <span v-text="quoteDetail.displayName"></span>
          <span>:</span>
          <span style="width: 200px" class="ellipsis" v-text="quoteDetail.content"></span>
        </div>
        <span class="close-btn" @click="cancelQuote">x</span>
      </div>

      <div class="right-btns">
        <el-button
          style="background-color: #fff; border: solid #fff 1px; color: black"
          size="small"
          @click="clearContent"
        >
          清空
        </el-button>
        <el-button
          style="background-color: #ff9f00; border: solid #ff9f00 1px"
          type="primary"
          size="small"
          @click="talkToFriendTask"
        >
          发送(Enter)
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { TalkToFriendTask } from '@/api/webSocketApi'
import bus from '@/utils/bus'

export default {
  data() {
    return {
      enterSendFlag: true
    }
  },
  computed: {
    ...mapState('conversation', {
      quoteMsg: 'quoteMsg',
      quoteDetail: 'quoteDetail'
    }),
    ...mapGetters({
      remark: 'conversation/remark',
      content: 'conversation/content',
      contentType: 'conversation/contentType',
      currentWechat: 'conversation/currentWechat',
      currentFriend: 'conversation/currentFriend',
      currentWeChatId: 'conversation/currentWeChatId',
      currentFriendId: 'conversation/currentFriendId'
    })
  },
  mounted() {
    window.addEventListener('keydown', this.enter2Send)
    bus.$on('toggleEnterSend', (flag) => {
      this.enterSendFlag = flag
    })
  },
  created() {
    // 节流 几秒只执行一次
    this.talkToFriendTask = this._.throttle(this.talkToFriendTask, 500)
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.enter2Send)
  },
  methods: {
    // 发送消息
    talkToFriendTask() {
      // 未选择微信不能发送
      if (!this.currentWeChatId) {
        this.$message({
          type: 'warning',
          message: '请先选中微信！',
          duration: 1000
        })
        return
      }
      // // 如果手机下线或者未登录 不能发消息
      // if (!this.currentWechat.IsOnline) {
      //   this.$message.warning(`${this.currentWechat.WeChatNick} 不在线或者未登录，不能给其发消息！`)
      //   return
      // }
      // 未选择好友不能发送
      if (JSON.stringify(this.currentFriend) === '{}') {
        this.$message.warning('请先选择一个好友！')
        return
      }
      // 不能发送空的信息
      const cc = this.content.replace(/\s/gi, '')
      if (!cc) {
        this.$message.warning('请设置发送内容！')
        return
      }

      // 如果是发送到群里 并且被踢出群了 则不能发消息
      if (this.currentFriendId.indexOf('@chatroom') > 0 || this.currentFriendId.indexOf('@im.chatroom') > 0) {
        if (this.currentFriend.MemberList && this.currentFriend.MemberList.indexOf(this.currentWeChatId) < 0) {
          this.$message({
            type: 'warning',
            message: '你已被踢出群聊,不能在该群发送消息!',
            duration: 1000
          })
          return
        }
      }

      // 引用消息的优先级大于@消息
      if (this.quoteMsg) {
        // 只能发送文字
        if (this.contentType === 'Text') {
          TalkToFriendTask(this.currentWeChatId, this.currentFriendId, 'QuoteMsg', this.content, this.quoteMsg)
          // 重置数据
          this.clearContent()
          this.cancelQuote()
        } else {
          this.$alert('引用消息只能是文本消息', '提示', { type: 'warning' })
        }
      } else {
        TalkToFriendTask(this.currentWeChatId, this.currentFriendId, this.contentType, this.content, this.remark)
        this.clearContent()
      }
    },
    // ctrl + enter换行
    lineFeed() {
      const newContent = this.content + '\r\n'
      this.$store.commit('conversation/SET_CONTENT', newContent)
    },
    // enter发送消息
    enterSend(e) {
      e.preventDefault()
      // this.talkToFriendTask()
    },
    enter2Send(e) {
      if (this.enterSendFlag) {
        const { key, ctrlKey } = e
        if (key === 'Enter' && !ctrlKey) {
          this.talkToFriendTask()
        }
      }
    },
    setContent() {
      const newText = this.$refs.anwserText.value
      this.$store.commit('conversation/SET_CONTENT', newText)
    },
    // 清空message
    clearContent() {
      this.$store.commit('conversation/SET_CONTENT', '')
      this.$store.commit('conversation/SET_CONTENT_TYPE', 'Text')
      this.$store.commit('conversation/SET_REMARK', '')
    },
    // 取消引用消息
    cancelQuote() {
      this.$store.commit('conversation/SET_QUOTE_MSG', '')
      this.$store.commit('conversation/SET_QUOTE_DETAIL', {})
    }
  }
}
</script>

<style lang="scss" scoped>
.anwser-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #f3f3f3;

  .show-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    border-radius: 5px;
    .show-content-textarea {
      flex: auto;
      resize: none;
      line-height: 20px;
      font-size: 16px;
      padding: 5px;
      border: #dcdfe6 solid 1px;
      margin: 2px;
      &:focus {
        outline: none !important;
      }
    }
    .show-content-video {
      max-height: 100%;
      margin: 2px auto 0px;
    }
    .show-content-img {
      object-fit: scale-down;
      margin: 0 auto;
      margin-top: 2px;
    }
    .show-content-voice {
      margin: auto;
    }
    .show-content-file {
      padding: 0 10px;
      width: 100%;
      max-width: 100%;
      line-height: 20px;
      text-align: center;
      align-self: center;
      word-break: break-all;
      //   white-space: pre-wrap;
    }
  }

  .opration-btn {
    height: 50px;
    min-height: 50px;
    align-self: flex-end;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 0 5px;

    .quote-msg {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      margin-left: 2px;
      margin-right: 20px;
      overflow: hidden;

      .quote-content {
        background: #f2f2f2;
        display: flex;
        padding: 5px;
        overflow: hidden;
      }
      .close-btn {
        cursor: pointer;
        display: inline-block;
        margin-left: 10px;
        height: 20px;
        width: 20px;
        min-width: 20px;
        border-radius: 10px;
        text-align: center;
        line-height: 16px;
        font-size: 16px;
        background: #cfcfcf;
        color: #fff;
      }
    }
    .right-btns {
      display: flex;
      .el-button {
        width: 100px;
        margin: 5px;
      }
    }
  }
}
</style>

